<template>
  <ul class="image-list">
    <li v-for="(item, index) in data" :key="index">
      <img :src="item.url" alt="" />
    </li>
  </ul>
  <a-upload
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    action="/v2/5cc8019d300000980a055e76"
  >
    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons-vue";
const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>("");
</script>

<style lang="less" scoped>
.image-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  & > li {
    margin: 10px;
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  & > li:nth-child(8) {
    margin-left: 0;
  }
}
</style>
